date: 2023-09-01
Type: Cours
Projet: Blindcode
Cours: CSS

CSS : Exercice sur les bases du CSS

Header :

Cet exercice permettra de rassembler et appliquer toutes les notions vues précédemment. N'hésitez pas à :

Essayer par vous même
Retourner voir la doc vue précédemment
Aller chercher des infos sur internet
Discuter avec les camarades pour savoir si ils ont une idée
Revenir vers moi en me posant des questions

Et ce, dans cet ordre de priorité. En effet, la première étape est toujours d'essayer par sois même avant de se faire aider, ensuite, il est important d'essayer de s'en sortir par soi même avec les diverses doc, et seulement enfin il faut demander de l'aide aux autres ! C'est la stratégie pour progresser.

Body

Template HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Exercice CSS</title>
</head>
<body>
    <header>
        <h1>Titre de l'En-Tête</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">À Propos</a></li>
                <li><a href="#">Services</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Section 1</h2>
            <p>Ceci est un paragraphe dans la section 1.</p>
        </section>
        <section>
            <h2>Section 2</h2>
            <p>Ceci est un paragraphe dans la section 2.</p>
        </section>
    </main>
    <footer>
        <p>Pied de page</p>
    </footer>
</body>
</html>

Instructions pour l'exercice :

Principal

Créez un fichier CSS séparé nommé "style.css" dans le même répertoire que votre fichier HTML.
Dans le fichier CSS, utilisez des sélecteurs d'éléments pour styliser les éléments suivants :
- Le texte des titres de niveau 1 dans l'en-tête (header) doit être en couleur bleue.
- Le texte des paragraphes doit avoir une taille de police de 18 pixels.
- La couleur de fond de la section 1 doit être jaune.
- Ajoutez une bordure de 1 pixel de large et de couleur grise autour de la section 2 .
- Ajoutez une marge de 20 pixels autour des éléments de la liste de navigation.
Utilisez un sélecteur descendant pour styliser le texte des liens situés à l'intérieur de la liste de navigation de manière à ce qu'ils soient en couleur rouge.
Lorsque vous avez terminé, assurez-vous que le fichier HTML inclut le fichier CSS.
Ouvrez le fichier HTML dans un navigateur pour voir le résultat de vos styles CSS et me le présenter (je vous conseille tout au long de votre développement d'aller vérifier votre rendu !).

Bonus

Une fois votre quête principale terminée, et que je suis passé vérifier votre exercice, je vous invite à poursuivre en attendant que les autres terminent, ou pour vous exercer chez vous. Bien sûr, vous pouvez toujours m'envoyer votre résultat par mail, ou me reposer des questions, ou me réappeler en classe par rapport à cette partie aussi. Je ne vais pas insister à chaque fois là dessus, mais il est primordial que vous compreniez que c'est en faisant cet exercice bonus que vous allez devenir meilleur. C'est là que ce fera la différence entre ceux qui sont motivés, et qui encreront la matière définitivement dans leur cerveau, et ceux qui feront le minimum et qui devront à chaque fois venir relire toute la doc. Vous ne serez jamais obligé de faire ces partie bonus (sauf si je dis autrement en classe), mais si vous voulez du taf, un conseil, faites-le, et mettez votre code sur GitHub !

Customiser le HTML pour parler d'un sujet qui vous parle ! Un jeu vidéo ? Une musique ? Un artiste ? Choisissez ! Mais pas un topic étendu, donc pas Les jeux vidéos, à ce moment là, préférez créer Fifa 2022.
Customiser le CSS Avec des couleurs qui vous intéresse. Changez tous les textes ! Tous les liens ! Faites de votre site, avec ce que vous avez appris et votre imagination, ce que vous voulez dans votre site. Et si vous voulez faire quelque chose que vous ne savez pas ? Demandez moi ! Ou cherchez sur internet ! C'est là que vous progresserez.